<!DOCTYPE html>
<html>
<head>
    <title>06_表单验证及操作基础</title>

    <meta charset="UTF-8"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>

    <meta name="HandheldFriendly" content="true"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <link href="./asset/gitbook/style.css" type="text/css" rel="stylesheet"/>
    <link href="./asset/gitbook/istyle.css" type="text/css" rel="stylesheet"/>

    <style type="text/css">
        
            span.md_line{margin-bottom:0.5em; display:block; line-height:1.89}
            .md_line br{ display: none;}
            
    </style>

    <script>
        var flowchat_options = {
            'x': 0, 'y': 0, 'line-width': 1, 'line-length': 50, 'text-margin': 10, 'font-size': 13,
            'font-color': '#3c3c3c', 'line-color': '#666666', 'element-color': '#666666', 'fill': 'transparent',
            'yes-text': 'yes', 'no-text': 'no', 'arrow-end': 'block', 'class': 'flowchart', 'scale': 1,
            'symbols': { 'start': {}, 'end': {}, 'condition': {}, 'inputoutput': {}, 'operation': {}, 'subroutine': {}}
        }
    </script>
    <script type="text/javascript" src="./asset/other/raphael-min.js"></script>
    <script type="text/javascript" src="./asset/other/flowchart.js"></script>
    <script type="text/javascript" src="./asset/other/echarts.min.js"></script>


</head>

<body>





<div data-basepath="/service/gitbook" class="book">
    <div class="book-summary">
        <ul class="summary">
            <li>
                <a href="./index.html">笔记</a>
            </li>
            <li class="divider"></li>
            
                
                
    
    <li data-level="1" class="chapter" data-path="01_JavaScript基本语法.html">
        
        
        <a href="./01_JavaScript基本语法.html" ><b>1</b> 第一章:JavaScript基本语法</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="2" class="chapter" data-path="02_函数与window对象.html">
        
        
        <a href="./02_函数与window对象.html" ><b>2</b> 第二章_函数与window对象</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="3" class="chapter" data-path="03_DOM编程.html">
        
        
        <a href="./03_DOM编程.html" ><b>3</b> 03_DOM编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="4" class="chapter" data-path="04_DOM高级编程.html">
        
        
        <a href="./04_DOM高级编程.html" ><b>4</b> 04_DOM高级编程</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="5" class="chapter" data-path="05_控制CSS样式.html">
        
        
        <a href="./05_控制CSS样式.html" ><b>5</b> 05_控制CSS样式</a>
        
            
                    
                
        
    </li>

            
                
                
    
    <li data-level="6" class="chapter active" data-path="06_表单验证及操作基础.html">
        
        
        <a href="./06_表单验证及操作基础.html" ><b>6</b> 06_表单验证及操作基础</a>
        
            
                    
                
        
    </li>

            
        </ul>

    </div>

    <div class="book-body">
        <div class="body-inner">

            <div class="book-header" role="navigation">
                <h1>
                    <a href="./index.html" > 笔记</a>
                </h1>
            </div>

            <div tabindex="-1" class="page-wrapper">
                <div class="page-inner">
                    <h2 class="post_title"> 06_表单验证及操作基础 </h2>
                    <div class="post_body"> <p class="md_block">

<div class="toc"><ul>
<li>
<a href="#toc_0">06_表单验证及操作基础</a>
<ul>
<li>
<a href="#toc_1">选择表单元素</a>
<ul>
<li>
<a href="#toc_2">1.选择表单</a>
</li>
<li>
<a href="#toc_3">2.选择表单中元素</a>
</li>
<li>
<a href="#toc_4">3.用JS控制表单提交</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</p>


<h2 id="toc_1">选择表单元素</h2>

<h3 id="toc_2">1.选择表单</h3>
<div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
    <span class="c1">//var f1 = document.getElementById(&#39;form1&#39;);</span>
    <span class="c1">//var f1 = document.getElementsByTagName(&#39;form&#39;)[0];</span>
    <span class="c1">//var f1 = document.forms[0];//js提供的表单选择器</span>
    <span class="kd">var</span> <span class="nx">f1</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">forms</span><span class="p">[</span><span class="s1">&#39;form1&#39;</span><span class="p">];</span><span class="c1">//js提供的表单选择器:name属性或ID都能获取</span>
    <span class="c1">//var f1 = document.form1;//用表单的name属性值选择</span>
    <span class="nx">alert</span><span class="p">(</span><span class="nx">f1</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">);</span>
    <span class="p">}</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_3">2.选择表单中元素</h3>
<div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="kd">var</span> <span class="nx">f1</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">forms</span><span class="p">[</span><span class="s1">&#39;form1&#39;</span><span class="p">];</span><span class="c1">//js提供的表单选择器:name</span>
    <span class="c1">//alert(f1.email.value);//获取name为email的value</span>
    <span class="c1">//alert(f1.elements[0].value);//获取集合中第一个表单元素的value</span>
    <span class="nx">alert</span><span class="p">(</span><span class="nx">f1</span><span class="p">.</span><span class="nx">elements</span><span class="p">[</span><span class="s1">&#39;email&#39;</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span><span class="c1">//获取name为email的value</span>
    <span class="nx">alert</span><span class="p">(</span><span class="nx">f1</span><span class="p">.</span><span class="nx">elements</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span><span class="c1">//获取表单中表单元素的个数</span>
</pre></div>

<!--block_code_end-->
<p class="md_block">
    <span class="md_line">3.表单中的HTML(学生作品修改而来)</span>
</p>

<div class="codehilite code_lang_html  highlight"><pre><span></span>            <span class="p">&lt;</span><span class="nt">form</span>  <span class="na">name</span><span class="o">=</span><span class="s">&quot;form1&quot;</span> <span class="na">action</span><span class="o">=</span><span class="s">&quot;index.html&quot;</span> <span class="na">method</span><span class="o">=</span><span class="s">&quot;get&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">table</span> <span class="na">border</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="na">cellspacing</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">cellpadding</span><span class="o">=</span><span class="s">&quot;&quot;</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>Email地址:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;email&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;admin@qq.com&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>设定昵称:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;username&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>设定密码:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;passworld&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>再一次输入密码:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;passworld2&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">td</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;w&quot;</span><span class="p">&gt;</span>性别 男:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;radio&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;sex&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;男&quot;</span> <span class="p">/&gt;</span>     女:<span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;radio&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;sex&quot;</span> <span class="na">value</span><span class="o">=</span><span class="s">&quot;女&quot;</span> <span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>
                            所在地区:<span class="p">&lt;</span><span class="nt">select</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;province&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;width:120px;&quot;</span><span class="p">&gt;</span>
                                <span class="p">&lt;</span><span class="nt">option</span><span class="p">&gt;</span>请选择省/城市<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
                            <span class="p">&lt;</span><span class="nt">select</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;city&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;width:130px;&quot;</span><span class="p">&gt;</span>
                                <span class="p">&lt;</span><span class="nt">option</span><span class="p">&gt;</span>请选择城市/地区<span class="p">&lt;/</span><span class="nt">option</span><span class="p">&gt;</span>
                            <span class="p">&lt;/</span><span class="nt">select</span><span class="p">&gt;</span>
                        <span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
                        <span class="c">&lt;!--&lt;td&gt;&lt;img src=&quot;img/register_btn_out.gif&quot;/&gt;&lt;/td&gt;--&gt;</span>
                        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">&quot;f1Submit1()&quot;</span>  <span class="na">value</span><span class="o">=</span><span class="s">&quot;&quot;</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;background-image: url(img/register_btn_out.gif);width: 143px; height: 31px;&quot;</span><span class="p">/&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
                    <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
                <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
</pre></div>

<!--block_code_end-->
<h3 id="toc_4">3.用JS控制表单提交</h3>
<div class="codehilite code_lang_javascript  highlight"><pre><span></span><span class="c1">//表单提交事件,如果返回true则提交,如果返回false则不提交.</span>
<span class="c1">//&lt;form  name=&quot;form1&quot; method=&quot;get&quot; onsubmit=&quot;return f1Submit();&quot;&gt;</span>
<span class="kd">function</span> <span class="nx">f1Submit</span><span class="p">(){</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="s1">&#39;确认要提交表单吗?&#39;</span><span class="p">)){</span>
        <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
<span class="c1">//用普纯JS代码来执行表单提交.</span>
<span class="c1">//&lt;input type=&quot;button&quot; onclick=&quot;f1Submit1()&quot;</span>
<span class="kd">function</span> <span class="nx">f1Submit1</span><span class="p">(){</span>
    <span class="kd">var</span> <span class="nx">f1</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">form1</span><span class="p">;</span><span class="c1">//用表单的name属性值选择</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">confirm</span><span class="p">(</span><span class="s1">&#39;确认要提交表单吗?&#39;</span><span class="p">)){</span>
        <span class="nx">f1</span><span class="p">.</span><span class="nx">submit</span><span class="p">();</span><span class="c1">//表单有一个方法,也可以提交</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>

<!--block_code_end--> </div>
                </div>
            </div>

        </div>

    </div>

</div>


<script type="text/javascript" src="./asset/gitbook/app.js"></script>

<script>require(["gitbook"], function (gitbook) {
    var config = {"fontSettings": {"theme": null, "family": "sans", "size": 2}};
    gitbook.start(config);
});

</script>





</body>

</html>